const os = require('os');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入插件 每次打包的时候，打包目录都会遗留上次打包的文件，为了保持打包目录的纯净，我们需要在打包前将打包目录清空
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 前面，我们都是依赖 style-loader 将样式通过 style 标签的形式添加到页面上 
// 但是，更多时候，我们都希望可以通过 CSS 文件的形式引入到页面上 就是样式文件单独在dist下生成一个文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 压缩js webpack内置插件
const TerserPlugin = require('terser-webpack-plugin');

const threads = os.cpus().length; //cpu 核数

console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量

// 用来处理封装样式loader
function getStyleLoader(pre) {
  return [
    // 使用多个loader
    // "style-loader",
    MiniCssExtractPlugin.loader,  // style-loader 替换成这个plugin
    "css-loader", 
    // 样式兼容loader 
    {
      loader: 'postcss-loader',
      // 配置项
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env', 
              {
                // 其他选项
              },
            ],
          ],
        },
      },
    },
    pre
  ].filter(Boolean)  // filter 过滤掉undefined， 有的选项没有传参这边就收就会是undefined 过滤掉  
} 

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 加载器
  module: {
    rules: [
      // 规则数组，当规则匹配时，只使用第一个匹配规则。
     {
      oneOf: [
        {
          test: /\.js$/i,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env'
                ],
              }
            }
          ]
        },
        {
          test: /\.css$/,
          // loader: 'xxx', // 只能使用1个loader
          use: getStyleLoader()
          //   [
          //   // 使用多个loader
          //   // "style-loader",
          //   MiniCssExtractPlugin.loader,  // style-loader 替换成这个plugin
          //   "css-loader",  
          //   {
          //     loader: 'postcss-loader',
          //     // 配置项
          //     options: {
          //       postcssOptions: {
          //         plugins: [
          //           [
          //             'postcss-preset-env', 
          //             {
          //               // 其他选项
          //             },
          //           ],
          //         ],
          //       },
          //     },
          //   },
          // ],
        },
        {
          test: /\.less$/,
          // loader: 'xxx', // 只能使用1个loader
          use: getStyleLoader("less-loader")
          //   [
          //   // 使用多个loader
          //   // "style-loader",
          //   MiniCssExtractPlugin.loader,
          //   "css-loader",
          //   {
          //     loader: 'postcss-loader',
          //     // 配置项
          //     options: {
          //       postcssOptions: {
          //         plugins: [
          //           ['postcss-preset-env'],
          //         ],
          //       },
          //     },
          //   },
          //   "less-loader", // 将less编译成css文件
          // ],
        },
        {
          // sass 和 scss文件
          test: /\.s[ac]ss$/,
          use: getStyleLoader("sass-loader")
        },
        {
          test: /\.styl$/,
          use: getStyleLoader("stylus-loader")
        }, 
        // 加载图片
        {
          test: /\.(png|jpe?g|gif|webp|svg)$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              // 小于10kb的图片转base64
              // 优点：减少请求数量  缺点：体积会更大
              maxSize: 10 * 1024, // 10kb
            },
          },
          // generator: {
          //   // 输出图片名称
          //   // [hash:10] hash值取前10位
          //   filename: "static/images/[hash:10][ext][query]",
          // },
        },
        {
          test: /\.(ttf|woff2?|map3|map4|avi)$/,
          type: "asset/resource",
          generator: {
            // 输出名称
            filename: "static/media/[hash:10][ext][query]",
          },
        },
      ]
     }
    ]
  },
  // 插件
  plugins: [
    // 自动生成index.html文件
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源
      // template: path.resolve(__dirname, "../public/index.html"),
      template: "./public/index.html",
    }),
    new CleanWebpackPlugin(), // 引入插件
    new MiniCssExtractPlugin({ // 添加插件
      filename: '[name].[hash:8].css'
    }),
    // new CssMinimizerPlugin()
  ],
  // 可以放在这里压缩操作
  optimization: {
    minimize: true, // 开启最小化
    minimizer: [
      // 压缩css
      new CssMinimizerPlugin(),
      // 压缩js
      new TerserPlugin({
        parallel: threads, // 开启多进程和设置进程数量 
      })
    ]
  },
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 执行打包后，dist 目录下会生成以 .map 结尾的 SourceMap 文件 生产模式和开发模式不同
  devtool: 'source-map',
  // 模式
  mode: 'development',
  // devtool: "cheap-module-source-map",
}